# State: State & Gestures

Front-end state and gestures. Use the following events to listen to changes in the App state and various user gestures.

# Functions

# edger.env()

• Returns: {Promise} Promise object.

The data object contains the following members:

• id {String} App unique identifier.
• env {String} App environment. Including: edgerapp or edgerpc.
• brand {String} App brand of the mobile phone. Including: apple, xiaomi, oppo, vivo, etc.
• platform {String} App platform. Including: android or ios.
• appVersion {String} App version.
• osVersion {String} Operating system version.

Developers can determine whether this function works in the EdgerOS mobile App environment through the following code:

# Example

edger.env().then(data => {
  if (data.env === 'edgerapp') {
    // We work in EdgerOS mobile App environment.
  }
}).catch(error => {
  console.error(error);
});

# Events

The unified event listener provided by Web-SDK:

const listener = (payload) => {
  // Event handling...
}

// add listener
edger.addEventListener('some-event', listener);

// or 
// onAction() is an alias of addEventListener().
edger.onAction('some-event', listener);

// remove listener
edger.removeEventListener('some-event', listener);

// remove all listeners
edger.removeAllListeners();

# active

The application is switched from the background to the foreground.

• Returns: {Object} This active object.

Get an active object of promise type. The active object includes:

• reason {String} Active reason. Must be open or resume. open means tap out triggers the opening of EAP, resume means the EAP switching from the background to the foreground or exiting the media player overlay.

# Example

const listener = (payload) => {
  const { reason } = payload;
  console.log('Active reason:', reason);
}

edger.addEventListener('active', listener);

# deactive

The application is switched from the foreground to the background.

• Returns: {Object} This deactive object.

Get a deactive object of promise type. The deactive object includes:

• reason {String} Deactive reason. Must be minimize or paused. minimize means tap out triggers the minimizing of EAP, paused means the EAP switching from the foreground to the background or opening the media player overlay.

# Example

const listener = (payload) => {
  const { reason } = payload;
  console.log('Deactive reason:', reason);
}

edger.addEventListener('deactive', listener);

# swipe

Application navigation can be roughly divided into the following three categories:

• Single page application routing-based navigation.
• Single page application non-route-based navigation.
• Multi-page applications, such applications are naturally based on routing navigation.

Traditional applications that navigate the page based on route jumps need to call the edger.enableHistoryNavigation() method at the beginning of the page to enable this type of navigation.

In order to adapt to the support of the left and right swipe gestures of various mobile terminals, the system defaults not to navigate based on the browser history. Instead, when the user's left and right swipe gestures are triggered, a swipe event is sent to the application to inform the application of the direction of the sliding, and the user responds to the routing change. So if you want to use route-based page navigation, you need to manually call the edger.enableHistoryNavigation() method once.

If it is a multi-page application, each page needs to load the web-sdk, but only the home page needs to call the edger.enableHistoryNavigation() method.

# Example

• Use traditional navigation:

edger.enableHistoryNavigation();

• Listen for left and right swipe events:

const listener = (payload) => {
  const { direction } = payload;
  if (direction === 'left') {
    // swipe left
  } else if (direction === 'right') {
    // swipe right (For future)
  }
}

edger.addEventListener('swipe', listener);